<template>
  <view class="padding-lg bg-gray" style="min-height:100vh">

    <view class="padding bg-white margin-top">
      <evan-form :hide-required-asterisk="false" :label-style="labelStyles" 
        ref="form" :model="formInfo" class="no-bottom-border">

        <evan-form-item label="姓名：" prop="uname" label-position="top">
          <view class="i-input">
            <input type="text" v-model="formInfo.uname" placeholder="请输入" />
          </view>
        </evan-form-item>
        <evan-form-item label="性别：" prop="sex" label-position="top">
          <radio-group @change="onSexChange" style="width:100%">
            <label class="margin-right" v-for="(it, i) in sexOpts" :key="it.value">
              <text class="margin-right-xs">
                {{it.label}}
              </text>
              <radio :value="it.value" :checked="it.value === formInfo.sex" />
            </label>
          </radio-group>
        </evan-form-item>
        <!-- <evan-form-item label="年龄：" prop="age" label-position="top">
          <view class="i-input">
            <input type="number" v-model="formInfo.age" placeholder="请输入" />
          </view>
        </evan-form-item> -->
        <evan-form-item label="身份证号：" prop="idno" label-position="top">
          <view class="i-input">
            <input type="text" v-model="formInfo.idno" placeholder="请输入" />
          </view>
        </evan-form-item>
        <evan-form-item label="电话：" prop="phone" label-position="top">
          <view class="i-input">
            <input type="text" v-model="formInfo.phone" placeholder="请输入" />
          </view>
        </evan-form-item>
        <evan-form-item label="地址：" prop="addr" label-position="top">
          <view class="i-input">
            <input type="text" v-model="formInfo.addr" placeholder="请输入" />
          </view>
        </evan-form-item>

        <view class="margin-top-xl">
          <button :disabled="submiting" @click="onSubmit" class="cu-btn lg btn-fluid bg-primary">提交</button>
        </view>
      </evan-form>
    </view>
    
    <cu-bar></cu-bar>
  </view>
</template>

<script>
import CheckAuthMixin from '@/mixins/CheckAuthMixin'
import checkIdCard from '@/libs/checkIdCard' 
const isMobilePhone = (value) => {
  const reg = /^1\d{10}$/
  if (reg.test(value)) {
    return true
  }
  return false
}

const CACHE_KEY = 'ts_matters_submiting'

const FormInfo = {
  uname: '',
  sex: '1',
  age: '',
  idno: '',
  phone: '',
  pat_id: '',
  memo: '',
  addr: '',
  isMainland: '1',
}

export default {
  mixins: [
    CheckAuthMixin,
  ],
  data() {
    return {
      labelStyles: {
        minWidth: '80px',
        textAlign: 'justify',
        paddingRight: '30upx',
        fontSize: '30upx',
        color: 'inherit',
      },
      submiting: false,
      formInfo: Object.assign({}, FormInfo),
      formRules: {
        uname: [
          { required: true, message: '请输入姓名' },
        ],
        sex: [
          { required: true, message: '请选择性别' },
        ],
        // age: [
        //   { required: true, message: '请输入年龄' },
        // ],
        addr: [
          { required: true, message: '请输入地址' },
        ],
        idno: [
          { required: true, message: '请输入身份证号' },
          {
            validator: (rule, value, callback) => {
              if (this.formInfo.isMainland == '1' && !checkIdCard(value)) {
                callback(new Error('请输入正确的身份证号'))
              } else {
                callback()
              }
            },
          }
        ],
        phone: [
          { required: true, message: '请输入手机号' },
          {
            validator: (rule, value, callback) => {
              if (!isMobilePhone(value)) {
                callback(new Error('请输入正确的手机号'))
              } else {
                callback()
              }
            },
          }
        ],
      },
      sexOpts: [
        { label: '男', value: '1'},
        { label: '女', value: '2'},
      ],
    }
  },
  watch: {
    submiting(val) {
      if (val) {
        uni.showLoading()
      } else {
        uni.hideLoading()
      }
    },
  },
  onLoad(opts) {
    this.$utils.pLog('== onLoad: ', this.formInfo)
    this.loadState()
  },
  mounted() {
    this.$refs.form.setRules(this.formRules)
  },
  methods: {
    onSexChange(e) {
      this.formInfo.sex = e.detail.value
    },
    onSubmit() {
      this.$refs.form.validate((res) => {
        if (res) {
          this.$utils.pLog('== submiting: ', this.formInfo)
          const { uname, sex, idno, phone, pat_id, memo, addr, isMainland } = this.formInfo
          this.$http({
            url: '/api/PatientInfo/Create',
            method: 'POST',
            data: {
              name: uname,
              sex: sex,
              idnum: idno,
              isMainland,
              addr: addr,
              tel: phone,
            },
            success: (res) => {
              if (res.success) {
                this.formInfo.pat_id = res.data
                this.saveState()
                this.gotoStep3()
              } else {
                uni.showToast({
                  title: res.msg,
                  icon: 'none'
                })
              }
            }
          })
        }
      })
    },
    saveState() {
      this.$utils.tempPageData.set(this.formInfo, CACHE_KEY)
    },
    loadState() {
      const cached = this.$utils.tempPageData.get(CACHE_KEY)
      if (cached) {
        // console.log('---', cached)
        Object.assign(this.formInfo, cached)
      }
    },
    gotoStep3() {
      // uni.navigateTo({
      //   url: `/pages/hesuanyuyue/step3/index`
      // })
      uni.navigateTo({
        url: `/pages/hesuanyuyue/sickcheck/index`
      })
    },
  },
}
</script>

<style scoped>
.bg-cus-blue {
  background: #3182F8;
}
.no-bottom-border /deep/ .evan-form-item-container {
  border-bottom: none;
}
</style>